<template>
  <autoDraggle
    :width="dragArea.width"
    :height="dragArea.height"
    :position="nc.position"
    :isFocus="nc.isFocus"
    @changeFocus="changeFocus"
    @changeSize="changeSize"
    @changePosition="changePosition"
  >
    <div v-if="nc.id == 'bdsearch'" :ref="nc.id" class="bd-search" :style="{ top: nc.y + 'px', left: nc.x + 'px' }">
      <form action="http://www.baidu.com/s" method="GET">
        <input ref="search" class="kw-input" autocomplete="off" type="text" name="wd" size="38" />
        <input class="kw-button" type="submit" value="百度一下" />
        <input type="hidden" name="ie" value="utf-8" />
        <input type="hidden" name="tn" value="ace" />
      </form>
      <div id="menu" class="menu">
        <img class="logo" src="/icons/38.png" />
        <div style="width: 8px"></div>
        <h3>Hellow 2023</h3>
      </div>
    </div>

    <div @dblclick="handleCardDbClick" v-else :ref="nc.id" class="ncard" :style="{ top: nc.y + 'px', left: nc.x + 'px' }">
      <template v-if="nc.isFocus">
        <div class="icon-btn-group">
          <div style="flex: 1"></div>
          <i v-if="nc.lock" class="el-icon-lock nc-header-icon b" @click="$emit('lock', false)"></i>
          <i v-else class="el-icon-unlock nc-header-icon b" @click="$emit('lock', true)"></i>
          <i class="el-icon-document-copy nc-header-icon b" @click="copyAllToChipboard"></i>
          <i class="el-icon-edit-outline nc-header-icon b" @click="doEdit"></i>
          <i class="el-icon-delete nc-header-icon r" @click="$emit('doDelete')"></i>
        </div>
        <div class="create-time">{{ nc.createdTime.replace(/-/g, '') }}</div>
      </template>

      <div class="nc-header">
        <i v-if="nc.isFocus" class="el-icon-location nc-header-icon b"></i>
        <i v-else class="el-icon-location-outline nc-header-icon b"></i>
        <div class="nc-header-title">{{ nc.title }}</div>
      </div>
      <div class="nc-content">
        <div v-for="(line, inx) in nc.lines" class="nc-content-line" :key="inx">
          {{ line.tip || line.content }}<i v-if="nc.isFocus" class="el-icon-document-copy icon" @click="copyLineToChipboard(line.content)"></i>
        </div>
      </div>
    </div>
  </autoDraggle>
</template>

<script>
import autoDraggle from '@/components/autoDraggle.vue'
export default {
  components: {
    autoDraggle,
  },
  name: 'NoteCard',
  data() {
    return {
      dragArea: { width: 0, height: 0 },
    }
  },
  props: {
    nc: {
      type: Object,
      default: () => {
        return {
          id: '',
          position: {
            left: 400,
            top: 200,
          },
          isFocus: false,
          lines: [
            { content: '第一行', rate: 4 },
            { content: '第2行', rate: 4 },
          ],
          title: '她的电话',
        }
      },
    },
  },
  created() {},
  mounted() {
    this.reSizeSelected()
  },
  computed: {},
  methods: {
    reSizeSelected() {
      // console.log('reSizeSelected')
      this.dragArea.width = this.$refs[this.nc.id].clientWidth
      this.dragArea.height = this.$refs[this.nc.id].clientHeight
    },
    async copyAllToChipboard() {
      let item = ''
      for (let x of this.nc.lines) item += x.content + '\n'
      await navigator.clipboard.writeText(item)
      this.$message.info('已经复制到剪切板！')
    },

    async copyLineToChipboard(c) {
      await navigator.clipboard.writeText(c)
      this.$message.info('已经复制到剪切板！')
    },
    doEdit() {
      this.$emit('doEdit')
    },
    changeFocus({ e, index, flag }) {
      // console.debug('call changeFocus:', e, index, flag)
      let ispass = false
      if (e && e.target && e.target.className == 'kw-input') {
        ispass = true
        console.log('kw-input')
        this.$nextTick(() => {
          this.$refs.search.focus()
        })
      }
      flag = !flag ? false : true
      this.$emit('changeFocus', { ispass, flag })
    },

    changePosition({ left, top }) {
      this.$emit('changePosition', { left, top })
      // console.debug('call changePosition:', left, top)
    },
    handleCardDbClick() {
      this.$emit('itemdbclick')
    },

    changeSize({ width, height, left, top }) {
      console.debug('call changeSize:', width, height, left, top)
      //   // if (width) {
      //   //   this.$emit('sync', { key: 'width', value: width })
      //   // }
      //   // if (height) {
      //   //   this.$emit('sync', { key: 'height', value: height })
      //   // }
      //   // if (left) {
      //   //   this.$emit('sync', { key: 'left', value: left })
      //   // }
      //   // if (top) {
      //   //   this.$emit('sync', { key: 'top', value: top })
      //   // }
    },
  },
}
</script>

<style lang="scss" scoped>
.bd-search {
  display: flex;
  flex-direction: column;
  width: 480px;
  position: absolute;
}
form {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
}
.logo {
  width: 56px;
}
.menu {
  font-size: 20px;
  width: 100%;
  padding: 10px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu h3 {
  color: #444;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.kw-input {
  width: 512px;
  height: 16px;
  padding: 12px 16px;
  font-size: 16px;
  margin: 0;
  vertical-align: top;
  outline: 0;
  box-shadow: none;
  border-radius: 10px 0 0 10px;
  border: 1px solid #c4c7ce;
  background: #fff;
  color: #222;
  overflow: hidden;
  box-sizing: content-box;
  -webkit-tap-highlight-color: transparent;
}

.kw-button {
  cursor: pointer;
  width: 138px;
  height: 43px;
  line-height: 43px;
  padding: 0;
  background: 0 0;
  background-color: #4e6ef2;
  border-radius: 0 10px 10px 0;
  font-size: 17px;
  color: #fff;
  box-shadow: none;
  font-weight: 400;
  border: none;
  outline: 0;
}
.nc-header-icon {
  font-size: 18px;
  margin-right: 4px;
}

.nc-header-icon:hover {
  margin-bottom: 4px;
}

.r {
  color: red;
}
.b {
  color: #409eff;
}
.ncard {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  // align-items: center;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  // height: 100px;
  width: 260px;
  max-width: 400px;
  border-radius: 10px;
  position: absolute;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.24), -2px -2px 6px rgba(0, 0, 0, 0.24);

  .create-time {
    position: absolute;
    bottom: 8px;
    right: -100px;
    letter-spacing: 1px;
    width: 85px;
    display: flex;
    align-items: flex-end;
    font-size: 14px;
    color: #888;
  }
  .icon-btn-group {
    position: absolute;
    top: -28px;
    left: 4px;
    letter-spacing: 1px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    font-size: 14px;
    color: #777;
  }
  .nc-header {
    height: 28px;
    box-sizing: box-sizing;
    display: flex;
    align-items: center;
    padding: 4px;
    // border-radius: 10px;
    background: #fff;
    border-bottom: 1px #bbb solid;

    .nc-header-title {
      flex: 1;
      font-size: 13px;
      letter-spacing: 2px;
      font-weight: bold;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .suffix {
      margin-left: 4px;
    }
  }

  .nc-content {
    .nc-content-line:nth-child(odd) {
      background: #f0f9eb;
    }
    .nc-content-line {
      position: relative;
      background: #fefefe;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      font-size: 12px;
      line-height: 26px;
      height: 28px;
      box-sizing: box-sizing;
      padding: 4px 8px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      letter-spacing: 1px;
      color: #555;
      .icon {
        position: absolute;
        top: 5px;
        right: 4px;
        padding: 4px;
        width: 16px;
        height: 16px;
        border-radius: 16px;
        font-size: 16px;
        color: #555;
        // background: rgba(#e6a23c, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
